// 基础配置：JSON Server地址
const baseUrl = 'http://localhost:3000/students';
// 获取DOM元素
const addBtn = document.getElementById('addBtn');
const formContainer = document.getElementById('formContainer');
const formTitle = document.getElementById('formTitle');
const editId = document.getElementById('editId');
const nameInput = document.getElementById('nameInput');
const ageInput = document.getElementById('ageInput');
const majorInput = document.getElementById('majorInput');
const gradeInput = document.getElementById('gradeInput');
const submitBtn = document.getElementById('submitBtn');
const cancelBtn = document.getElementById('cancelBtn');
const studentTable = document.getElementById('studentTable').querySelector('tbody');


// 初始化：渲染学生表格
function renderTable() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', baseUrl, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            const students = JSON.parse(xhr.responseText);
            // 清空表格
            studentTable.innerHTML = '';
            // 渲染每行数据
            students.forEach(student => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${student.id}</td>
                    <td>${student.姓名}</td>
                    <td>${student.年龄}</td>
                    <td>${student.专业}</td>
                    <td>${student.年级}</td>
                    <td>
                        <button class="edit-btn" data-id="${student.id}">编辑</button>
                        <button class="delete-btn" data-id="${student.id}">删除</button>
                    </td>
                `;
                studentTable.appendChild(tr);
            });
            // 绑定操作按钮事件
            bindOperateEvents();
        }
    };
    xhr.send();
}


// 绑定编辑、删除按钮事件
function bindOperateEvents() {
    // 编辑按钮
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.onclick = function() {
            const id = this.getAttribute('data-id');
            // 获取该学生数据并填充表单
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `${baseUrl}/${id}`, true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const student = JSON.parse(xhr.responseText);
                    formTitle.textContent = '编辑学生';
                    editId.value = student.id;
                    nameInput.value = student.姓名;
                    ageInput.value = student.年龄;
                    majorInput.value = student.专业;
                    gradeInput.value = student.年级;
                    formContainer.style.display = 'block';
                }
            };
            xhr.send();
        };
    });

    // 删除按钮
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.onclick = function() {
            const id = this.getAttribute('data-id');
            if (confirm('确定要删除该学生吗？')) {
                const xhr = new XMLHttpRequest();
                xhr.open('DELETE', `${baseUrl}/${id}`, true);
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        alert('删除成功');
                        renderTable(); // 重新渲染表格
                    }
                };
                xhr.send();
            }
        };
    });
}


// 新增按钮点击事件：显示空表单
addBtn.onclick = function() {
    formTitle.textContent = '新增学生';
    editId.value = '';
    nameInput.value = '';
    ageInput.value = '';
    majorInput.value = '';
    gradeInput.value = '';
    formContainer.style.display = 'block';
};


// 取消按钮点击事件：隐藏表单
cancelBtn.onclick = function() {
    formContainer.style.display = 'none';
};


// 表单提交事件：新增/编辑学生
submitBtn.onclick = function() {
    // 获取表单数据
    const studentData = {
        姓名: nameInput.value,
        年龄: parseInt(ageInput.value),
        专业: majorInput.value,
        年级: gradeInput.value
    };

    // 判断是新增还是编辑
    const isEdit = editId.value !== '';
    const xhr = new XMLHttpRequest();
    if (isEdit) {
        // 编辑：PUT请求
        xhr.open('PUT', `${baseUrl}/${editId.value}`, true);
    } else {
        // 新增：POST请求
        xhr.open('POST', baseUrl, true);
    }
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
        if (xhr.status === 200 || xhr.status === 201) {
            alert(isEdit ? '编辑成功' : '新增成功');
            formContainer.style.display = 'none';
            renderTable(); // 重新渲染表格
        }
    };
    xhr.send(JSON.stringify(studentData));
};


// 页面加载时初始化表格
window.onload = renderTable;
